<template>
  <div class="main-container">
    <div class="content-left">
      <div class="left-container-top" @click="back">
        <svg
          width="12"
          height="23"
          viewBox="0 0 17 28"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12.816 27.1456C13.4813 27.2521 14.1971 27.2206 14.812 26.9349C16.0417 26.3616 16.4007 25.133 15.6005 24.2357L6.13011 13.6057L15.9192 3.26836C16.7463 2.39584 16.4247 1.15683 15.2131 0.546425C14.0014 -0.0620508 12.2964 0.158828 11.469 1.03327L0.667337 12.4389C0.062737 13.0757 0.0494345 13.951 0.634404 14.6059L11.0845 26.3345C11.4847 26.7841 12.151 27.0391 12.816 27.1456Z"
            fill="#FF5F04"
          />
        </svg>
      </div>
      <el-card
        shadow="hover"
        class="left-box-card"
        :style="{
          background: `url(${backgroundImage}) no-repeat center/cover`,
          width: '100%',
          height: '80vh'
        }"
      >
        <div class="content-left-commStyle">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8081/attachment/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeUpload"
            :on-change="handleChange"
            :headers="headerObject"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </el-card>
    </div>
    <div class="content-middle">
      <el-card shadow="hover" class="middle-box-card">
        <el-form style="width: 100%;" label-width="120px" ref="loginForm">
          <el-form-item :label="$t('home.name')" prop="account">
            <el-input
              v-model="userDetailInfo.userName"
              :placeholder="$t('home.namePlaceholder')"
              maxlength="50"
              show-word-limit
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('login.email')" prop="email">
            <el-input
              v-model="userDetailInfo.email"
              :placeholder="$t('login.emailPlaceholder')"
              maxlength="50"
              show-word-limit
              clearable
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="Brand" prop="brand">
            <el-input
              v-model="vendor.vendor"
              maxlength="50"
              show-word-limit
              clearable
              :disabled="true"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item :label="$t('home.promoCode')" prop="account">
            <el-input v-model="form.bankName" :placeholder="$t('home.promoCodePlaceholder')" maxlength="50"
              show-word-limit clearable></el-input>
          </el-form-item> -->
        </el-form>
        <!-- <div class="content-middle-upload">
          <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div> -->
        <div>
          <i class="el-icon-s-grid">Brand Introduction</i>
          <el-input
            type="textarea"
            :rows="6"
            placeholder="Introduce your brand......"
            v-model="vendor.remark"
            :disabled="true"
          />
        </div>
      </el-card>
    </div>
    <div class="content-right">
      <el-card shadow="hover" class="right-box-card">
        <el-form
          style="width: 100%;"
          label-position="top"
          label-width="80px"
          ref="loginForm"
        >
          <div
            style="display: flex; justify-content: center; align-items: center;caret-color: transparent;"
          >
            {{ $t("home.paymentMethods") }}
          </div>
          <div class="payment-method">
            <div
              class="payplay-button"
              :style="{
                background: `url(${paypalImageUrl}) no-repeat center/cover`
              }"
              @click="changePayMethod('payplay')"
            ></div>
            <div
              class="wire-button"
              :style="{
                background: `url(${wireImageUrl}) no-repeat center/cover`
              }"
              @click="changePayMethod('wire')"
            ></div>
          </div>
          <el-divider />
          <img
            v-if="userBank.bankType == 1"
            style="height: 18%;width:30%;"
            src="../../assets/img/PayPal.png"
          />
          <img
            v-if="userBank.bankType == 2"
            style="height: 18%;width:32%;"
            src="../../assets/img/WireTransfer.png"
          />
          <el-divider />
          <el-form-item
            v-if="userBank.bankType == 1"
            :label="$t('home.beneficiaryName')"
            prop="account"
          >
            <el-input
              v-model="userBank.beneficiaryName"
              :placeholder="$t('home.beneficiaryNamePlaceholder')"
              maxlength="50"
              show-word-limit
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="userBank.bankType == 1"
            :label="$t('home.accountNo')"
            prop="account"
          >
            <el-input
              v-model="userBank.bankAccount"
              :placeholder="$t('home.accountNoPlaceholder')"
              maxlength="50"
              show-word-limit
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="userBank.bankType == 1"
            :label="$t('home.bankName')"
            prop="account"
          >
            <el-input
              v-model="userBank.bankName"
              :placeholder="$t('home.bankNamePlaceholder')"
              maxlength="50"
              show-word-limit
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="userBank.bankType == 1"
            :label="$t('home.bankAddress')"
            prop="account"
          >
            <el-input
              v-model="userBank.bankAddress"
              :placeholder="$t('home.bankAddressPlaceholder')"
              maxlength="50"
              show-word-limit
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="userBank.bankType == 1"
            :label="$t('home.swiftCode')"
            prop="password"
          >
            <el-input
              v-model="userBank.swiftCode"
              :placeholder="$t('home.swiftCodePlaceholder')"
              maxlength="50"
              show-word-limit
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="userBank.bankType == 2"
            :label="$t('login.email')"
            prop="password"
          >
            <el-input
              v-model="userBank.email"
              :placeholder="$t('login.emailPlaceholder')"
              maxlength="50"
              show-word-limit
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <div>
        <el-button
          :loading="submitLoading"
          @click="submitForm"
          style="background-color: #F86704; color: white; width: 100%;margin-top: 8%;"
          >{{ $t("home.submit") }}</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { queryUserInfoRoleById, saveUpdateUserBank } from "@/api/userService";
import qs from "qs";
import Vue from "vue";

export default {
  components: {},
  data() {
    return {
      submitLoading: false,
      userId: "",
      userDetailInfo: {},
      userBank: { bankType: "" },
      vendor: {},
      backgroundImage: "",
      autoUpload: false,
      saveUpdateUserBankQo: { satoken: localStorage.getItem("satoken") },
      paypalImageUrl: require("../../assets/img/PayPalOn.png"),
      wireImageUrl: require("../../assets/img/WireTransferOff.png"),
      headerObject: { satoken: localStorage.getItem("satoken") },
      cacheFlag: false
    };
  },
  methods: {
    // onSubmit() {
    //   this.$refs.form.validate(valid => {
    //     if (valid) {
    //       this.$message.success("提交成功！");
    //     } else {
    //       this.submitLoading = false;
    //       return false;
    //     }
    //   });
    // },
    async submitForm() {
      this.saveUpdateUserBankQo.userId = this.userId;
      this.saveUpdateUserBankQo.bankType = this.userBank.bankType;
      this.saveUpdateUserBankQo.beneficiaryName = this.userBank.beneficiaryName;
      this.saveUpdateUserBankQo.bankName = this.userBank.bankName;
      this.saveUpdateUserBankQo.bankAddress = this.userBank.bankAddress;
      this.saveUpdateUserBankQo.bankAccount = this.userBank.bankAccount;
      this.saveUpdateUserBankQo.swiftCode = this.userBank.swiftCode;
      this.saveUpdateUserBankQo.userName = this.userDetailInfo.userName;
      this.saveUpdateUserBankQo.avatarUrl = this.userDetailInfo.avatarUrl;
      if (/^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(this.userBank.email) == false) {
        this.$message.error(this.$t('login.emailCheck'));
        return;
      }
      this.saveUpdateUserBankQo.email = this.userBank.email;
      this.submitLoading = true;

      await saveUpdateUserBank(this.saveUpdateUserBankQo).then(res => {
        if (res.code == 200) {
          this.$message.success(this.$t("home.operationSuccess"));
          this.submitLoading = false;
          if (this.cacheFlag) {
            this.$router.go(-1);
          }
        } else {
          this.$message.error(res.msg);
          this.submitLoading = false;
        }
      });
    },
    onReset() {
      this.$refs.form.resetFields();
    },
    handleAvatarSuccess(res, file) {
      if (res) {
        this.userDetailInfo.avatarUrl = res;
      } else {
        this.$message.error(this.$t("home.operationError"));
      }
    },
    back() {
      if (this.cacheFlag) {
        this.$router.go(-1);
      } else {
        this.$message.warning(
          "There is currently no higher-level menu, unable to return"
        );
      }
    },
    async getUserInfoRoleById() {
      await queryUserInfoRoleById(this.userId).then(res => {
        if (res.code === 200) {
          this.userDetailInfo = res.data;
          if (res.data.userBank) {
            this.userBank = res.data.userBank;
          }
          if (res.data.vendor) {
            this.vendor = res.data.vendor;
          }
          if (this.userDetailInfo.avatar) {
            this.backgroundImage = this.userDetailInfo.avatar;
          } else {
            this.backgroundImage = require("../../assets/img/userInfoUpload.jpg");
          }
          if (this.userBank.bankType == "") {
            this.userBank.bankType = 1;
            this.changePayMethod("payplay");
          } else {
            this.userBank.bankType == 1
              ? this.changePayMethod("payplay")
              : this.changePayMethod("wire");
          }
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleChange(file, fileList) {
      fileList.forEach(element => {
        this.backgroundImage = URL.createObjectURL(element.raw);
      });
    },
    beforeUpload(file, fileList) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      const fileExtension = file.name
        .split(".")
        .pop()
        .toLowerCase();

      if (
        fileExtension != "png" &&
        fileExtension != "jpeg" &&
        fileExtension != "jpg"
      ) {
        this.$message.error(
          "Uploading avatar images can only be in JPG or PNG format!"
        );
        return;
      }
      if (!isLt2M) {
        this.$message.error(
          "The size of the uploaded avatar image cannot exceed 10MB!"
        );
        return;
      }
    },
    changePayMethod(method) {
      if (method == "payplay") {
        this.userBank.bankType = 1;
        this.paypalImageUrl = require("../../assets/img/PayPalOn.png");
        this.wireImageUrl = require("../../assets/img/WireTransferOff.png");
      } else {
        this.userBank.bankType = 2;
        this.paypalImageUrl = require("../../assets/img/PayPalOff.png");
        this.wireImageUrl = require("../../assets/img/WireTransferOn.png");
      }
    }
  },
  created() {
    if (this.$route.params.id) {
      this.userId = this.$route.params.id;
      this.cacheFlag = true;
    } else {
      this.userId = qs.parse(localStorage.getItem("userInfo")).id;
      this.cacheFlag = false;
    }
    this.getUserInfoRoleById();
  }
};
</script>

<style scoped>
@import "../../assets/css/UserInformation.css";
</style>
